<template>
  <li>
    <div class="m-item" @click="selectHandle">
      <label class="m-menu-title" :style="{'paddingLeft': leftPadding + 'px'}">
        <slot name="icon"></slot>
        <slot name="title"></slot>
      </label>
      <Icon class="m-menu-btn" :type="selBtn"></Icon>
    </div>
    <ul class="m-submenu" :style="computeStyle">
      <slot></slot>
    </ul>
  </li>
</template>
<script>
    import emitter from '@/mixins/emitter.js'
    export default{
        name: 'PoemSubMenu',
        mixins: [ emitter ],
        props: {
          level: {
            type: Number,
            default: 1
          },
          isActive: {
            type: Boolean,
            default: false
          },
          name: {
            type: String,
            //required: true
          }
        },
        data () {
          return {
            active: false
          }
        },
        computed:{
          selBtn () {
            return this.active ? 'chevron-up' : 'chevron-down';
          },
          leftPadding () {
            return (this.level - 1) * 20;
          },
          computeStyle () {
            let styleObj = {};
            if(!this.active){
              styleObj['display'] = 'none';
            }
            return styleObj;
          }
        },
        methods: {
          selectHandle () {
            this.active = !this.active;
          }
        },
        mounted () {
            this.$on('sub-select', function () {
                this.active = true;
                this.dispatch('PoemSubMenu', 'sub-select');
            });
            this.$on('item-change', function(name) {
                this.active = false;
                this.broadcast('PoemSubMenu','item-change',name);
                this.broadcast('PoemMenuItem','item-change',name);
            });
        }
    }
</script>
